import React from 'react';
import SearchInput from "@/components/search/SearchInput"
import { SearchBox, Context } from "./Search.style.js"
import * as api from "@/api/index"
import { useEffect, useState } from 'react';

const Search = (props) => {
    const [keyword, setKeyword] = useState([])
    const [queryValue, setQueryValue] = useState('')
    const [resultlist, setResultlist] = useState([])
    const [isSucceed, setSucceed] = useState(false)

    const keyWordList = () => {
        api
            .reqlist()
            .then((res) => {
                if (res.status == 200) {
                    let result = res.data.data.ListData
                    console.log(queryValue,'query');
                    let reg = new RegExp(queryValue)
                    result.map((item) => {
                        console.log(item.title);
                        if (reg.test(item.title)) {
                            setResultlist(item)
                            setSucceed(true)
                        }
                    })
                    console.log(res.data.data.ListData);
                    setKeyword(result)
                }

            })
    }
    console.log(resultlist);
    const searchResult = () => {
        return (
            <>
                {resultlist.map(item => {
                    return (
                        <li key={item.id}>
                            <img src={item.image} alt="" />
                            <div className="title">{item.title}</div>
                            <span>{item.price}</span>
                        </li>
                    )
                })}
            </>
        )
    }

    useEffect(() => {
        keyWordList()
    }, [queryValue])
    //   console.log(queryValue);
    return (
        <>
            <SearchBox>
                <SearchInput queryValue={queryValue} />
            </SearchBox>
            <Context>
                <div className="search_history">
                    <div className="title">推荐搜索</div>
                    {keyword.map((item) => {
                        return (
                            <li key={item.id} onClick={() => { setQueryValue(item.keyword) }}>
                                <span>{item.keyword}</span>
                            </li>
                        )
                    })}
                </div>

                {/* <div className="searchResult">
                    {isSucceed ? searchResult() : {}}
                </div> */}
            </Context>
        </>
    )
}
export default Search;